{% schema %}
{
  "name": "Section name",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "Maximize your devices and bring them into the era of giant vitual scree"
    },
   {
      "type": "url",
      "id": "url",
      "label": "Image Url",
    },
    {
      "type": "url",
      "id": "pc_url",
      "label": "Image PC Url",
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Name",
      "default": "Button Name"
    },
  ]
}
{% endschema %}

{%- style -%}
  .devices-rokid-{{ section.id }} {
    width: 132px;
    height: 125px; 
    position: absolute;
    top: 110px;
    left: calc(50% - 66px);
     transform: translateX(-5%) translateY(-10%) scale(1.1);
  }

  .devices-animation-box-{{ section.id }} {
    width: 100%;
    height: 470px;
    position: relative;
  }
  .devices-animation-box-{{ section.id }}, .devices-animation-box-{{ section.id }} > div > div {
    transition: all 1.5s  ease-in-out;
  }

  .devices-iphone-{{ section.id }} {
    width: 42px;
    height: 78px; 
    position: absolute;
    top: 77px;
    left: calc(50% - 116.5px);
    transform: translateX(-100vw);
  }

  .devices-s1-{{ section.id }} {
    width: 100px;
    height: 47px; 
    position: absolute;
    top: 55px;
    left: calc(50% - 50px);
    transform: translateX(100vw);
  }

  .devices-s2-{{ section.id }} {
    width: 112px;
    height: 52px; 
    position: absolute;
    top: 102px;
    right: calc(50% - 184px);
    transform: translateX(100vw);
  }

  .devices-s3-{{ section.id }} {
    width: 106px;
    height: 54px; 
    position: absolute;
    top: 172px;
    right: calc(50% - 184px);
    transform: translateX(100vw);
  }

  .devices-handle-{{ section.id }} {
    width: 77px;
    height: 56px; 
    position: absolute;
    top: 176px;
    left: calc(50% - 160px);
    transform: translateX(-100vw);
  }

  .devices-ps-{{ section.id }} {
    width: 152px;
    height: 163px; 
    position: absolute;
    top: 252px;
    left: calc(50% - 142px);
    transform: translateX(-100vw);
  }

  .devices-mac-{{ section.id }} {
    width: 140px;
    height: 102px; 
    position: absolute;
    top: 244px;
    right: calc(50% - 174px);
    transform: translateX(100vw);
  }

  .active-{{ section.id }} .t0-{{section.id}} {
    transform: translateX(0px);
  }

  .active-{{ section.id }} .devices-rokid-{{ section.id }} {
   transform: none;
  }

  .title-{{section.id}} {
    width: 302px;
    height: 180px;
    opacity: 1;
    font-family: HarmonyOS Sans;
    font-size: 36px;
    font-weight: bold;
    line-height: 100%;
    text-align: center;
    letter-spacing: -1.6px;
    margin: 0 auto;
    color: #000000;
  }

  .devices-btn-box-{{ section.id }} {
    display: flex;
    justify-content: center;
    align-items: center; 
  }

  .offcanvas-body-{{ section.id }} {
    font-family: HarmonyOS Sans;
  }

  .devices-animation-box-{{ section.id }} img {
    width: 100%;
  }

  .rokid-max-2-{{ section.id }} {
    width: 100%;
  }

  .box-{{ section.id }} {
    padding-bottom: 50px;
  }
{%- endstyle -%}

<script>
  function addClassWhenInCenter() {
    const targetDiv = document.getElementById('devices-animation-box-{{ section.id }}');
    if (!targetDiv) return;
    const viewportHeight = window.innerHeight;
    const targetRect = targetDiv.getBoundingClientRect();
    const targetTop = targetRect.top;
    const targetBottom = targetRect.bottom;

    if (targetTop >= 0 && targetTop <= viewportHeight * 0.6) {
      targetDiv.classList.add('active-{{ section.id }}');
    } else if (targetTop < 0 && targetBottom > viewportHeight || targetTop > viewportHeight ) {
      targetDiv.classList.remove('active-{{ section.id }}');
    }
  }

  window.addEventListener('scroll', addClassWhenInCenter);
  addClassWhenInCenter();
</script>
<div class="bg-white position-relative">
<div class="overflow-hidden">
  <div class="pt-7 container box-{{ section.id }}">
  <div class="title-{{section.id}} anim mb-4">{{ section.settings.title }}</div>
  <div
    id="devices-animation-box-{{ section.id }}"
    class="devices-animation-box-{{ section.id }} active-{{ section.id }}"
  >
    <div class="position-absolute top-0 start-0 end-0 bottom-0">
        <div class="devices-rokid-{{ section.id }}">
        <img class="d-xl-none" src="https://cdn.shopify.com/s/files/1/0628/5636/4211/files/img_devices.png?v=1724763137" />
        <img class="d-none d-xl-block" src="https://cdn.shopify.com/s/files/1/0628/5636/4211/files/16_4x_6bf3ef43-e7a4-4fc7-8755-fbe672d314ed.png?v=1725337919" />
      </div>
      <div class="devices-iphone-{{ section.id }} t0-{{ section.id }}">
        <img class="d-xl-none"  src="https://cdn.shopify.com/s/files/1/0628/5636/4211/files/img_devices_iphone.png?v=1724763137" />
        <img class="d-none d-xl-block" src="https://cdn.shopify.com/s/files/1/0628/5636/4211/files/13_4x_873fee29-10a5-4415-8f9b-80004008cebb.png?v=1725337917" />
      </div>
      <div class="devices-s1-{{ section.id }} t0-{{ section.id }}">
        <img class="d-xl-none" src="https://cdn.shopify.com/s/files/1/0628/5636/4211/files/img_devices_switch.png?v=1724763137" />
        <img class="d-none d-xl-block" src="https://cdn.shopify.com/s/files/1/0628/5636/4211/files/12_4x_40404f42-dd67-47b7-9e82-9f9c42234d3d.png?v=1725337917" />
      </div>
      <div class="devices-s2-{{ section.id }} t0-{{ section.id }}">
        <img class="d-xl-none" src="https://cdn.shopify.com/s/files/1/0628/5636/4211/files/img_devices_switch2.png?v=1724763137" />
        <img class="d-none d-xl-block" src="https://cdn.shopify.com/s/files/1/0628/5636/4211/files/11_4x_8c0cfda3-667c-4ddf-97d1-1917720c023b.png?v=1725337917" />
      </div>
      <div class="devices-s3-{{ section.id }} t0-{{ section.id }}">
        <img class="d-xl-none" src="https://cdn.shopify.com/s/files/1/0628/5636/4211/files/img_devices_switch3.png?v=1724763137" />
        <img class="d-none d-xl-block" src="https://cdn.shopify.com/s/files/1/0628/5636/4211/files/10_4x_c3aabe23-2b03-4954-969e-4447bf098080.png?v=1725337917" />
      </div>
      <div class="devices-handle-{{ section.id }} t0-{{ section.id }}">
        <img class="d-xl-none" src="https://cdn.shopify.com/s/files/1/0628/5636/4211/files/img_devices_han_dle.png?v=1724763137" />
        <img class="d-none d-xl-block" src="https://cdn.shopify.com/s/files/1/0628/5636/4211/files/14_4x_5fbfc28e-9e34-43e3-8ce3-84802674ed52.png?v=1725337917" />
      </div>
      <div class="devices-ps-{{ section.id }} t0-{{ section.id }}">
         <img class="d-xl-none" src="https://cdn.shopify.com/s/files/1/0628/5636/4211/files/img_devices_ps5.png?v=1724763137" />
         <img class="d-none d-xl-block" src="https://cdn.shopify.com/s/files/1/0628/5636/4211/files/15_4x_4ab6323f-239f-4d5b-ad1a-5f19c0f6db2f.png?v=1725337919" />
      </div>
      <div class="devices-mac-{{ section.id }} t0-{{ section.id }}">
         <img class="d-xl-none" src="https://cdn.shopify.com/s/files/1/0628/5636/4211/files/img_devices_mac.png?v=1724763137" />
         <img class="d-none d-xl-block" src="https://cdn.shopify.com/s/files/1/0628/5636/4211/files/17_4x_b6dfe25e-994e-4024-b4a5-9285c12efa5c.png?v=1725337918" />
      </div>
    </div>
  </div>
  <div class="devices-btn-box-{{ section.id }} mt-2 mt-xl-7">
    <button
      class="btn btn-outline-primary"
      type="button"
      data-bs-toggle="offcanvas"
      data-bs-target="#offcanvasBottom-{{ section.id }}"
      aria-controls="offcanvasBottom"
    >
      {{ section.settings.button_text }}
    </button>
  </div>

  <div
    class="offcanvas offcanvas-bottom"
    tabindex="-1"
    id="offcanvasBottom-{{ section.id }}"
    aria-labelledby="offcanvasBottomLabel"
    style="height: 90vh;"
  >
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="offcanvasBottomLabel"></h5>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body small offcanvas-body-{{ section.id }} pb-4">
      <div class="container-md">
         <img class="rokid-max-2-{{ section.id }} d-md-none" src="{{ section.settings.url }}" />
         <img class="rokid-max-2-{{ section.id }} d-none d-md-block" src="{{ section.settings.pc_url }}" />
      </div>
    </div>
  </div>
</div>
</div>

</div>
<style>
  @media screen and (min-width: 1280px) {
    .box-{{ section.id }} {
      padding-top: 100px!important;
      padding-bottom: 100px!important;
    }
    .title-{{section.id}} {
      width: auto;
      font-size: 70px;
      height: auto;
      margin-bottom: 96px!important;
    }
    .devices-animation-box-{{ section.id }} {
      width: 100%;
      height: auto;
      padding-bottom: 46.518%;
      position: relative;
    }
   .devices-rokid-{{ section.id }} {
      width: 25.6428%;
      height: 52.76%;
      position: absolute;
      left: 45.2979%;
      top: 24.537%;
     transform: translateX(-39.69353%) translateY(-15%) scale(1.2);
  }

   .devices-iphone-{{ section.id }} {
    width: 8.542%;
    height: 33.3333%; 
    position: absolute;
    top: 49.228%;
    left: 33.4529%;
    transform: translateX(-100vw);
  }

  .devices-s1-{{ section.id }} {
    width: 19.95692%;
    height: 20.5246%; 
    position: absolute;
    top: 0;
    left: 46.87724%;
    transform: translateX(100vw);
  }

  .devices-s2-{{ section.id }} {
    width: 21.0337%;
    height: 23.4567%; 
    position: absolute;
    left: 76.3819%;
    top: 59.1049%;
    right: none;
    transform: translateX(100vw);
  }

  .devices-s3-{{ section.id }} {
    width: 22.182%;
    height: 22.99%; 
    position: absolute;
    left: 47.092%;
    top: 77.006%;
    transform: translateX(100vw);
  }

  .devices-handle-{{ section.id }} {
    width: 15.290%;
    height: 24.074%; 
    position: absolute;
    left: 30.8686%;
    top: 18.98148148%;
    transform: translateX(-100vw);
  }

  .devices-ps-{{ section.id }} {
    width: 30.15075376884422%;
    height: 69.5987%; 
    position: absolute;
    top: 14.04320987654321%;
    left: 0;
    transform: translateX(-100vw);
  }

  .devices-mac-{{ section.id }} {
    width: 27.70997846374731%;
    height: 43.399%; 
    position: absolute;
    top: 12.5%;
    left: 72.2900215%;
    transform: translateX(100vw);
  }
      .active-{{ section.id }} .t0-{{section.id}} {
    transform: translateX(0px);
  }

  .active-{{ section.id }} .devices-rokid-{{ section.id }} {
   transform: none;
  }
    .devices-btn-box-{{ section.id }} {
      margin-top: 115px;
    }
    .box-{{ section.id }} .btn {
            height: 72px !important;
        font-size: 28px;
  }
  }  
</style>